<template>
    <ScaleBox>
        <MyLargeScreen/>
    </ScaleBox>
</template>

<script>

// 大屏
import MyLargeScreen from "@/views/components/dataView/MyLargeScreen.vue";
import ScaleBox from "@/components/scaleBox/SacleBox.vue";

export default {
    name: 'LargeScreenIndex',
    components: {ScaleBox, MyLargeScreen},
    data() {
        return {}
    }
}
</script>


<style lang="scss" scoped>
.largeScreen {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    color: #fff;
    background-color: #030409;
    box-sizing: border-box;
    background-image: url('/public/img/slices/bg.png');

    .my-header {
        height: 6%;
        box-sizing: border-box;
        background-image: url('/public/img/slices/title@2x.png');
        background-size: cover; /* 背景图片覆盖整个元素 */
        background-repeat: no-repeat; /* 防止背景图片重复 */
        background-position: center center; /* 背景图片居中 */
    }

    .my-main {
        display: flex;
        width: 100%;
        height: 94%;
        box-sizing: border-box;

        .my-left {
            flex: 1;
            display: flex;
            flex-direction: column;
            height: 100%;
            box-sizing: border-box;

            .my-left-top {
                flex: 1;
                display: flex;
                flex-direction: column;
                width: 100%;
                height: 100%;
                box-sizing: border-box;
                border: #1ab394 solid 1px;


                .my-left-top-top {
                    flex: 1;
                    box-sizing: border-box;
                }

                .my-left-top-bottom {
                    flex: 1;
                    box-sizing: border-box;
                }


            }

            .my-left-center {
                flex: 1;
                box-sizing: border-box;
                border: #77d23e solid 1px;
            }

            .my-left-bottom {
                flex: 1;
                box-sizing: border-box;
            }


        }


        .my-left-background {
            background-image: url('/public/img/slices/left_top@2x.png');
            background-size: cover; /* 背景图片覆盖整个元素 */
            background-repeat: no-repeat; /* 防止背景图片重复 */
            background-position: center center; /* 背景图片居中 */
        }

        .my-center {
            flex: 2;
            display: flex;
            flex-direction: column;
            height: 100%;
            box-sizing: border-box;
            border: 1px solid aquamarine;

            .my-center-top {
                flex: 1;
                height: 100%;
                box-sizing: border-box;
                border: #3e8dd2 solid 1px;
                display: flex;
                align-items: center;
                justify-content: center;

                .my-center-top-main {
                    width: 97%;
                    height: 80%;
                    background-color: rgba(55, 214, 175, 0.1);
                }
            }

            .my-center-bottom {
                flex: 6;
                box-sizing: border-box;
            }

        }

        .my-right {
            flex: 1;
            display: flex;
            flex-direction: column;
            height: 100%;
            box-sizing: border-box;


            .my-right-top {
                flex: 1;
                box-sizing: border-box;
                border: #f22477 solid 1px;

            }

            .my-right-center {
                flex: 1;
                box-sizing: border-box;
                border: #77d23e solid 1px;
            }

            .my-right-bottom {
                flex: 1;
                box-sizing: border-box;
            }

        }

        .my-right-background {
            background-image: url('/public/img/slices/right_top@2x.png');
            background-size: cover; /* 背景图片覆盖整个元素 */
            background-repeat: no-repeat; /* 防止背景图片重复 */
            background-position: center center; /* 背景图片居中 */
        }
    }

}
</style>
